﻿
<!-- ==== PORTFOLIO ==== -->
<div id="portfolio" name="portfolio">
    <div class="container">
        @Html.Action("TopicContent", "Topic", new { systemName = "HomePagePortfolio" })
    </div>
</div>
<!-- /container --> 

<!-- MODAL SHOW THE PORTFOLIO IMAGE. In this demo, all links point to this modal. You should create
                      a modal for each of your projects. -->

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">{title}</h4>
            </div>
            <div class="modal-body">
                <p><img class="img-responsive" src="~/content/images/portfolio/folio02.jpg" alt=""></p>
                <!-- add body here <p>{body}</p> -->
                <p><b><a href="http://demo.giantsoft.cn" class="modal-url" target="_blank">去看看</a></b></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>

<script>

    $('#myModal').on('show.bs.modal', function (event) {
        var button = $(event.relatedTarget) // 触发事件的按钮
        var title = button.data('title') // 解析出data-title内容
        var picture = button.data('picture') // 解析出data-title内容
        var url = button.data('url');
        var modal = $(this)
        modal.find('.modal-title').text(title)
        modal.find('.modal-body img').attr('src', picture)
        modal.find('.modal-url').attr('href', url)
    })
</script>  
